<template>
<div class="bg-color">
  <div class="order-num">
    订单号：{{code}}
  </div>

  <div class="safeguard-type">
    <div class="weui-cell weui-cell_select">
      <div class="weui-cell__bd">
        <select class="weui-select" name="select1" v-model="mordRefundOrderPojo.refundReason">
          <option v-for="(v,k) in options" :value="v.text">{{v.text}}</option>
        </select>
      </div>
    </div>
    <div class="weui-cell text-box">
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" placeholder="请填写详细问题" rows="6" v-model="mordRefundOrderPojo.refundContent"></textarea>
        <div class="weui-textarea-counter">必填，至少输入20字 <span>{{contentNum}}</span>/100个字</div>
      </div>
    </div>
  </div>

  <div class="safeguard-img">
    <div class="weui-cell" style="padding-bottom: 0.3rem">
      <div class="weui-cell__bd">
        <div class="weui-uploader">
          <div class="weui-uploader__hd">
            <p class="weui-uploader__title">凭证照片（{{this.mordRefundOrderPojo.refundImages.length}}/5）</p>
          </div>
          <p class="safeguard-explain">为了帮助我们更好的为你解决问题，请上传凭证照片（必填）</p>

          <div class="weui-uploader__bd">
            <ul class="weui-uploader__files">
              <li class="weui-uploader__file"  v-for="(v,k) in mordRefundOrderPojo.refundImages" :key="k" :style="'backgroundImage:url('+resUrl+v.imageUrl+')'">
                <span @click="removeImg(k)"><img src="../../../../../static/images/publish/x.png" alt=""></span>
              </li>
            </ul>

            <div class="uploader__input-box" >
              <img src="../../../../../static/images/publish/publish-pro.png" alt="">
              <input id="uploaderInput1" name="files" class="weui-uploader__input" type="file" accept="image/*" multiple @change="upFile($event)"/>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="weui-cell" style="padding: 0.55rem 0.65rem 0.55rem 0;">
      <div class="weui-cell__bd">
        <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入你的联系电话(必填)" v-model="mordRefundOrderPojo.buyerMobile"/>
      </div>
    </div>
  </div>

  <div class="btn-box">
    <button class="weui-btn weui-btn_warn" type="button" @click="subAfterService">提交</button>
  </div>


</div>
</template>

<script>
  import {ipconfig} from '../../../../assets/js/ipconfig';
  import {getStatusMapByKey} from '../../../../assets/js/tools';
  import {uploadImage,safeguardOrder} from '../../../../assets/js/getData';
  export default {
    name: "afterService",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        orderId:null,
        code:null,//订单编号
        options:[],//售后原因列表


        mordRefundOrderPojo:{
          refundReason:'请选维权类型',//售后原因
          refundContent:'',//售后详细描述
          refundImages:[],//退款凭证图片列表
          buyerMobile:null,
        },

        urlType:null,//图片类型
      }
    },
    created(){
      this.options = [
        { text: '请选维权类型', value: 0 },
        { text: '拍品是假的', value: 1 },
        { text: '拍品是坏的', value: 2 }
      ];
      this.orderId = this.$route.query.orderId;
      this.code = this.$route.query.code;

      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['refundImages'].val;
    },
    computed:{
      contentNum(){
        return this.mordRefundOrderPojo.refundContent.length;
      }
    },
    methods:{
      //提交售后
      subAfterService(){
        if(this.mordRefundOrderPojo.refundReason=='请选维权类型'){
          Toast('请选维权类型');
          return;
        }
        if(this.contentNum<20){
          Toast('请填写详细问题，至少输入20个字');
          return;
        }
        if(this.contentNum>100){
          Toast('详细问题最多输入100个字');
          return;
        }
        if(this.mordRefundOrderPojo.refundImages.length==0){
          Toast('请上传凭证照片');
          return;
        }
        if(!this.mordRefundOrderPojo.buyerMobile){
          Toast('请填写联系方式');
          return;
        }
        let params = {
          id:this.orderId,
          mordRefundOrderPojo:this.mordRefundOrderPojo,
        };
        safeguardOrder(params).then(res => {
          if(res.data.reqResult.code > 0){
            Toast('申请成功');
            this.$router.replace({name:'orderDetail',query:{orderId:this.orderId}});
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //上传图片
      upFile(event) {
        let files = event.target.files;
        //上传图片
        let formdata = new FormData();
        formdata.append('type',this.urlType);
        for(let i=0;i<files.length;i++){
          formdata.append('files',files[i]);
        }
        uploadImage(formdata).then(res => {
          if(res.data.reqResult.code > 0){
            let data = res.data.data;
            for(let i=0;i<data.length;i++){
              let obj = {};
              obj.imageUrl = data[i].url;
              this.mordRefundOrderPojo.refundImages.push(obj);
            }
            console.log(this.mordRefundOrderPojo.refundImages);
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //删除图片
      removeImg(index){
        // this.filesList.splice(index,i);
        this.mordRefundOrderPojo.refundImages.splice(index,1);
      },
    }
  }
</script>

<style scoped>
  .bg-color{
    min-height: 100vh;
  }
  .order-num{
    height: 2.55rem;
    line-height: 2.55rem;
    padding-left: 0.75rem;
    color: #333333;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: #ffffff;
  }
  .safeguard-type{
    background-color: #ffffff;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
  }
  .weui-cell_select{
    padding: 0;
    padding-right: 0.65rem;
  }
  .weui-select{
    padding-left: 0;
    color: #333333;
    font-size: 0.75rem;
    line-height: 2.2rem;
    height: 2.2rem;
  }
  .weui-cell_select .weui-cell__bd{
    position: relative;
  }
  .weui-cell_select .weui-cell__bd:after {
    content: " ";
     display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(50%);
    width: 0;
    height: 0;
    border-top: 6px solid #BFBFBF;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
  }
  .weui-cell{
    padding-left: 0;
  }
  .weui-cell:before{
    left: 0;
  }
  .text-box{
    padding: 0.75rem 0.65rem 0.75rem 0;
  }
  .weui-textarea{
    color: #999999;
    font-size: 0.75rem;
    line-height: 0.95rem;
  }
  .weui-textarea-counter{
    color: #999999;
    font-size: 0.6rem;
  }
  /*表单placeholder样式*/
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999999;
    font-size: 0.75rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999999;
    font-size: 0.75rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999999;
    font-size: 0.75rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999999;
    font-size: 0.75rem;
  }
  /*上传图片*/
  .weui-uploader__file{
    width: 3.9rem;
    height: 3.9rem;
  }
  .weui-uploader__file:nth-child(4){
    margin-right: 0;
  }
  .uploader__input-box{
    position: relative;
    float: left;
    width: 3.9rem;
    margin-right: 0.45rem;
    margin-bottom: 0.45rem;
  }
  .uploader__input-box img{
    width: 100%;
  }
  .safeguard-img{
    background-color: #ffffff;
    padding: 0 0.75rem;
  }
  .weui-uploader__title{
    color: #333333;
    font-size: 0.75rem;
  }
  .safeguard-explain{
    color: #999999;
    font-size: 0.6rem;
    padding-bottom: 0.7rem;
  }
  .weui-cell__bd input {
    font-size: 0.75rem;
    color: #333333;
  }
  .btn-box{
    margin-top: 1rem;
    padding: 0 0.75rem;
  }
</style>
